<!-- Mindtagger inspection mode -->
<div>

<div mindtagger-navbar-top>

  <ul class="nav navbar-nav navbar-right">
    <!--
      <li class="dropdown"><a><i class="glyphicon glyphicon-filter"></i> Filter by <span class="caret"></span></a></li>
      <li class="dropdown"><a><i class="glyphicon glyphicon-sort-by-attributes"></i> Order by <span class="caret"></span></a></li>
    -->
    <li><a data-toggle="modal" data-target="#manage-tags-modal"
            ><i class="glyphicon glyphicon-cog"></i> Manage Tags...</a></li>
  </ul>

  <div mindtagger-insert-template="navbar"></div>

</div>

<section class="row">
<!-- Rendering items -->
<span mindtagger-insert-template="before-items"></span>
<span ng-repeat="item in MindtaggerTask.items">
<span mindtagger-insert-template="before-each-item"></span>
<span mindtagger-insert-template="each-item-container"
    mindtagger-item="item" ng-class="cursor ? 'mindtagger-cursor-item' : ''">
    <div class="panel panel-default"
      ng-class="cursor ? 'mindtagger-cursor-item panel-primary' : 'panel-default'">
        <div class="panel-body clearfix">
          <big>
            <div mindtagger-insert-template="each-item"></div>
          </big>
        </div>
        <div class="panel-footer clearfix">
          <!-- task-specific tagging UI elements -->
          <span mindtagger-insert-template="tags"></span>
        </div>
    </div>
</span>
<span mindtagger-insert-template="after-each-item"></span>
</span>
<span mindtagger-insert-template="after-items"></span>
</section>

<div mindtagger-navbar-bottom>
    <div class="row primary-tag-distribution primary-tag-distribution" ng-repeat="tagSchema in MindtaggerTask.schema.tags | toArray | orderBy:'count':true | limitTo:1">
        <div class="col-xs-2 text-right" style="white-space: nowrap;">
            <i class="glyphicon glyphicon-tag"></i> {{tagSchema.$key}}
        </div>
        <div class="col-xs-8" ng-include="'mindtagger/tag-distribution.html'"></div>

        <div class="col-xs-2" style="white-space: nowrap;">
            <a class="btn btn-sm btn-default" data-toggle="modal" data-target="#tags-stats-modal">
                <i class="glyphicon glyphicon-tasks"></i> #Tags <sup><i class="glyphicon glyphicon-new-window"></i></sup>
            </a>
        </div>
    </div>

    <div mindtagger-insert-template="pagination"></div>
</div>

<script type="text/ng-template" id="mindtagger/tag-distribution.html">
    <div class="progress" ng-if="tagSchema.frequency">
        <div class="progress-bar" role="progressbar"
            ng-repeat="(value, frequency) in tagSchema.frequency"
            tooltip="{{value}}: {{frequency}}/{{MindtaggerTask.itemsCount}}"
            tooltip-placement="top" tooltip-animation="false"
            tooltip-trigger="mouseenter" tooltip-append-to-body="li"
            ng-class="MindtaggerUtils.progressBarClassForValue(value, $index, tagSchema)"
            aria-valuenow="{{100 * frequency / MindtaggerTask.itemsCount | number:1}}" aria-valuemin="0" aria-valuemax="100"
            style="width:  {{100 * frequency / MindtaggerTask.itemsCount | number:1}}%;">
            {{100 * frequency / MindtaggerTask.itemsCount | number:0}}%
        </div>
    </div>
</script>

<!-- Tags statistics modal -->
<div class="modal" id="tags-stats-modal" tabindex="-1" role="dialog" aria-labelledby="tagsStatsModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="addTagModalLabel">Tags Statistics</h4>
      </div>
      <div class="modal-body">
        <div class="row tag-distribution" ng-repeat="tagSchema in MindtaggerTask.schema.tags | toArray | orderBy:'count':true">
            <div class="col-sm-2" style="white-space: nowrap;">
                <i class="glyphicon glyphicon-tag"></i> {{tagSchema.$key}}
            </div>
            <div class="col-sm-10" ng-include="'mindtagger/tag-distribution.html'"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</div>
